<template>
  <div class="container">
    <div class="head">
      <div><van-icon name="arrow-left" @click="fanhui" /></div>
      <div><van-icon name="ellipsis" /></div>
      <div><van-icon name="shopping-cart-o" /></div>

    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in Hotellists.img" :key="index">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>



  </div>
</template>

<script>
import { HotelChoose } from '@/api/guo/ferrMain'
export default {
  data() {
    return {

      Hotellists: [],
    };
  },
  mounted() {
    this.HotelChooseapi()
  },
  methods: {
    async HotelChooseapi() {//上半部分图标
      let { data } = await HotelChoose()
      let a = this.$route.params.id
      // console.log("a", a)
      // console.log("data", data)

      for (let i = 0; i < data.length; i++) {
        // console.log("data[i]", data[i].id);
        if (a == data[i].id) {
          this.Hotellists = data[i]
          // console.log("qwer", this.Hotellists);
          // console.log("img", this.Hotellists.img);
        }
      }



    },
    fanhui() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  /* 设置容器为相对定位 */
}

.head {
  z-index: 1;
  position: absolute;
  /* 设置head为绝对定位 */
  top: 0;
  /* 距离父级容器顶部的距离为0 */
  width: 100%;
  height: 44px;
  background-color: rgba(0, 255, 255, 0);
  float: left;

  div {
    width: 36px;
    height: 36px;
    line-height: 36px;
    background-color: rgba(115, 119, 123, 0.621);
    align-items: center;
    font-size: 25px;
    color: #fffbfb;
    border-radius: 50%;
    text-align: center;
  }

  div:nth-child(1) {
    width: 10%;
    float: left;

  }

  div:nth-child(2) {
    width: 10%;
    float: right;
    ;
  }

  div:nth-child(3) {
    width: 10%;
    float: right;
    ;
  }


}

img {
  height: 250px;

}
</style>

